<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>子组件向父组件传值</title>
</head>

<body>
  <div id="app">
    <Father />
  </div>
  <template id="father">
    <!-- 唯一根元素 -->
    <div>
      <h3>父组件</h3>
      <!-- 标签化嵌套子组件 -->
      <p>父亲的余额现在有：{{balance}}</p>
      <!-- 使用自定义事件形式将save方法绑定到子组件上 -->
      <!-- 自定义事件名可更改 -->
      <Son @dad_save="save" />
    </div>
  </template>
  <template id="son">
    <!-- 唯一根元素 -->
    <div>
      <h4>子组件</h4>
      <button @click="give">发红包</button>
    </div>
  </template>
</body>
<script src="../vue.js"></script>
<script>
  // 模拟一个父亲节发红包事件
  // 父组件 接收红包
  Vue.component('Father', {
    // 使用组件模板
    template: '#father',
    data() {
      return {
        balance: 10000
      }
    },
    methods: {
      save(value) {
        // value 参数是子组件传来的数据
        this.balance += value
      }
    }
  })
  // 子组件 定义红包
  Vue.component('Son', {
    template: '#son',
    data() {
      return {
        packet: 888
      }
    },
    methods: {
      give() {
        // 子组件通过 $emit 触发父组件绑定的方法 同时可以传递参数
        this.$emit('dad_save', this.packet)
      }
    }
  })
  new Vue({
    el: '#app'
  })
</script>

</html>